import { ElMessageBox } from 'element-plus'
import Sortable, { SortableEvent } from 'sortablejs'


type sortEventEnd = (oldIndex: number | undefined, newIndex: number | undefined) => void
type sortVancel = () => void
export const initSortable = (end: sortEventEnd, cancel: sortVancel) => {
    // 获取表格row的父节点
    const tableElement = document.querySelector('.el-table__body-wrapper tbody') as HTMLElement
    // 创建拖拽实例
    const sort = Sortable.create(tableElement, {
        animation: 550, //动画
        disabled: false, // 拖拽不可用? false 启用（刚刚渲染表格的时候起作用，后面不起作用）
        // 结束拖动事件
        onEnd: (event: SortableEvent) => {
            const { oldIndex, newIndex } = event
            ElMessageBox.confirm('是否保存排序？', '提示',
                {
                    confirmButtonText: '确 认',
                    cancelButtonText: '取 消',
                    type: 'success',
                    center: true,
                    draggable: true,
                }
            ).then(async () => {
                end(oldIndex, newIndex)
            }).catch(() => {
                cancel()
            })
        },
    })
}